<!-- 交易流水 -->
<template>
  <div>
    <titleWrap :labelWidth="labelWidth" :queryFormConfig="queryFormConfig" :queryFormData="queryFormData">
      <!-- 消费金额 -->
      <div slot="maxAmount">
        <div class="flexDiv">
          <el-input size="mini" placeholder="最低" @input="handleInput($event, 'minAmount')"
            @keyup.enter.native="handleQuery" v-model="queryFormData.minAmount"></el-input>
          <span style="margin:0 10px;">至</span>
          <el-input size="mini" placeholder="最高" @input="(value) => value.replace(/[^\d.]/g, '')"
            @keyup.enter.native="handleQuery" v-model="queryFormData.maxAmount"></el-input>
        </div>
      </div>

      <!-- 按钮 -->
      <div slot="btn">
        <div>
          <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
          <el-button size="mini" @click="exportExcle">导出</el-button>
          <el-button type="text" size="mini" @click="reset">清空筛选</el-button>
        </div>
      </div>

      <myTable :tableConfig="tableConfig" :pagination="pagination" @paginationQuery="paginationQuery"></myTable>
    </titleWrap>
  </div>
</template>

<script>
import { downloadFile } from "@/utils/index";
import { queryPaged, exportExcle } from "@/api/transactionRecord";
export default {
  components: {},
  data() {
    return {
      labelWidth: "65px",
      queryFormConfig: [
        {
          label: "订单编号",
          prop: "orderCode",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "用户编码",
          prop: "customerCode",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "商户编码",
          prop: "merchantCode",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "商户名称",
          prop: "merchantName",
          type: "input",
          enter: this.handleQuery
        },
        { label: "消费金额", slotName: "maxAmount" },
        {
          label: "交易时间",
          prop: "time",
          type: "dateRange",
          change: this.handleQuery
        },
        { label: "", slotName: "btn" }
      ],
      queryFormData: {},
      tableConfig: {
        showIndex: false,
        loading: false,
        selection: false,
        data: [],
        columns: [
          { label: "订单编号", prop: "orderCode" },
          { label: "用户编码", prop: "customerCode" },
          { label: "商户编码", prop: "merchantCode" },
          { label: "商户名称", prop: "merchantName" },
          { label: "消费金额", prop: "amount" },
          { label: "优惠劵抵扣金额", prop: "discountAmount" },
          { label: "实际支付金额", prop: "actualAmount" },
          { label: "交易时间", prop: "payTime" }
        ]
      },
      pagination: {
        page: 1,
        limit: 20,
        total: 0
      }
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    handleInput(value, key) {
      // 1. 过滤非数字和非小数点的字符
      value = value.replace(/[^\d.]/g, "");
      // 2. 处理多个小数点（只保留第一个）
      value = value.replace(/\.{2,}/g, ".");
      // 3. 处理小数点开头（自动补0）
      value = value.replace(/^\./g, "0.");
      // 4. 更新到绑定的变量
      this.queryFormData[key] = value;
    },
    // 查询
    handleQuery(num = 1) {
      if (num != 0) {
        this.pagination = {
          page: 1,
          limit: 20,
          total: 0
        };
      }
      this.tableConfig.loading = true;
      if (this.queryFormData.time) {
        this.queryFormData.minPayTime = this.queryFormData.time[0];
        this.queryFormData.maxPayTime = this.queryFormData.time[1];
      } else {
        this.queryFormData.minPayTime = "";
        this.queryFormData.maxPayTime = "";
      }
      queryPaged({
        ...this.queryFormData,
        pageIndex: this.pagination.page,
        pageSize: this.pagination.limit,
        sortBy: 1
      })
        .then(res => {
          const { data, flag } = res;
          this.tableConfig.loading = false;
          this.tableConfig.data = data;
          this.pagination.total = flag;
        })
        .catch(res => {
          this.tableConfig.loading = false;
        });
    },
    paginationQuery(val) {
      this.pagination.page = val.page;
      this.handleQuery(0);
    },
    // 重置
    reset() {
      this.queryFormData = {};
      this.handleQuery();
    },
    exportExcle() {
      exportExcle({}).then(res => {
        downloadFile(res);
      });
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-form-item:nth-child(6) {
  width: 28% !important;
}
</style>